<template>
  <span
    class="flavor-tag"
    :class="{active}"
    @click="active = !active"
  >
    {{ label }}
  </span>
</template>

<script>
export default {
  name: 'FlavorTag',
  props: ['label'],
  data () {
    return { active: false }
  }
}
</script>

<style scoped>
.flavor-tag{
  display:inline-block;padding:6px 12px;margin:4px;
  background:#f3f4f6;border-radius:9999px;font-size:13px;cursor:pointer;
  transition:all .3s;
}
.flavor-tag.active,.flavor-tag:hover{background:#8B5A2B;color:#fff;}
</style>